<template>
  <div class="home" style="background-color: rgb(247, 248, 250); height: 99vh;">
    <!-- 导航栏 -->
    <van-sticky :offset-top="-5">
      <div name="daohang" style="background-color: #fff; margin-top: 5px; display:block;">
        <van-row>
          <van-col span="2" style="padding:5px 0"><van-icon @click.native="router.push(`/home/index`)" name="arrow-left"
              color="block" size="25" /></van-col>
          <van-col span="18">
            <van-search v-model="name" style="margin: 1px;padding: 0px;" shape="round" placeholder="请输入搜索关键词">
              <template #right-icon>
                <!-- <van-icon name="photograph" style="margin-right: 13px;" size="22" /> -->
              </template></van-search></van-col>
          <div>
            <van-button @click="search" style="padding: 0px 15px; margin-top: 3px;" round type="success" size="small"
              color="rgb(112,200,248)">搜索</van-button>
          </div>
        </van-row>
      </div>
    </van-sticky>
    <!-- 药品卡片 -->
    <div @click.native="router.push(`/medicine/${item.drug_id}`)" v-for="item in drugs" :key="item.drug_id">
      <van-card :price="item.durg_price" :desc="item.drug_effect" :thumb="item.drug_cover">
        <template #title>
          <span style="font-size: 18px;" v-html="brightenKeyword(item.drug_name, name)"></span>
        </template>
      </van-card>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive } from 'vue';
import { useRouter } from 'vue-router';
import Drug from '@/type/Drug';
import httpApi from '@/http';
import Color from 'element-plus/es/components/color-picker/src/utils/color';
// import store from '@/store';
const back = () => history.back()
const drugs = reactive<Drug[]>([])
const router = useRouter()
onMounted(() => {
  httpApi.medicineApi.queryAll({ page: 1, pagesize: 30 }).then(res => {
    // console.log(res, drugs);
    drugs.push(...res.data.data.result)
  })
})
let name = "";
const search = function () {
  let params = { drug_name: name };
  httpApi.medicineApi.queryNameLike(params).then((res) => {
    // console.log("模糊查询相关知识", res);
    drugs.splice(0, drugs.length, ...res.data.data);
  });
};

const brightenKeyword = (val: any, name: string) => {
  // 方法一
  val = val + '';
  // console.log('药品药品', val);
  if (val.indexOf(name) !== -1 && name !== '') {
    return val.replace(name, '<span style="color: rgb(14, 166, 216);">' + name + '</span>')
  } else {
    return val
  }
  // 方法二
  // const Reg = new RegExp(name, 'i');
  // if (val) {
  //   const res = val.replace(Reg, `<p style="color: #f4ea2a;">${name}</p>`);
  //   console.log('药品名称', res);
  //   return res;
  // }
}

</script>
<style scoped>
.van-search {
  border: 1px solid rgb(112, 200, 248);
  border-radius: 20px
}

.van-tag {
  margin-left: 12px;
}
</style>